<template>
	<view class="content">
		<view class="list">
			<view class="item " :class="[currentIndex==index?'active':'']" v-for="(item,index) of step" :key="index">
				<view class="nubmer">
					{{index+1}}
				</view>
				<view class="desc">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'Step',
		props:{
			step:Array,
			currentIndex:Number
		},
		data: function() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	.content{
		padding: 40px;
	}
	.list{
		display: flex;
	}
	.list .item{
		flex: 1;
		text-align: center;
	}
	.list .item.active{
		color: #0099CC;
		font-style: italic;
	}
	.list .item>view{
		margin: 20px 0;
	}
	.list .item .nubmer{
		font-size: 50px;
	}
</style>
